//烧结库存
<template>
    <!--<h1>烧结库存</h1>-->
    <div class="container">
        <div class="msg">
            <div class="msg-container">
                <p>
                    <i class="fa fa-volume-up" aria-hidden="true"></i>
                    <span> {{msg_data}}</span>
                </p>
            </div>
        </div>

        <div class="content">
            <table class="table">
                <thead>
                <tr>
                    <th><select>
                        <option v-for="(item,index) in select_data" :key="index">{{item}}</option>

                    </select></th>
                    <th>当日库存</th>
                    <th>日耗</th>
                    <th>库存天数</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in table_list" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.day_amount}}</td>
                    <td>{{item.daily_consumption}}</td>
                    <td>{{item.doi}}</td>
                </tr>

                </tbody>


            </table>
            <div class="content-bottom">
                <div>
                    <i class="fa fa-line-chart" aria-hidden="true"></i>
                    <span>历史趋势</span>
                </div>
                <div class="chart-container" id="chart">

                </div>
            </div>

        </div>
        <div class="replace">

        </div>

    </div>
</template>

<script>
  import echarts from "echarts";

  export default {
    name: "materialStore",
    data() {
      return {
        msg_data: '美国球团，库存2000吨，库存天数2天',
        select_data: ['中信球矿', 'PB块矿', '杨迪粉', '氧化铁皮'],
        chart_x: ['2018/01/01', '2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05', '2018/01/06', '2018/01/07', '2018/01/08', '2018/01/09'],
        chart_data_day: [10, 12, 12, 15, 18, 20, 30, 33, 40],
        chart_data_use: [5000, 2000, 1000, 5000, 10000, 3000, 2000, 4000, 5000],
        chart_data_left: [10000, 20000, 30000, 40000, 50000, 60000, 80000, 60000, 60000],
        table_list: [{
          name: '中信球框',
          day_amount: 85,
          daily_consumption: 65,
          doi: 3.5
        },
          {
            name: 'PB块矿',
            day_amount: 85,
            daily_consumption: 65,
            doi: 3.5
          },
          {
            name: '杨迪粉',
            day_amount: 85,
            daily_consumption: 65,
            doi: 3.5
          },
          {
            name: '氧化铁皮',
            day_amount: 85,
            daily_consumption: 65,
            doi: 3.5
          }
        ]
      };
    },
    mounted() {
      const myChart_chart = echarts.init(document.getElementById("chart"));
      const option_chart = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          show: false
        },
        legend: {
          data: ['中信球库存', '日耗', '可用天数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        dataZoom: [
          {
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'empty'
          },
        ],
        xAxis: [
          {
            type: 'category',
            data: this.chart_x,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              rotate: 40
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
          },
          {
            type: 'value',
            name: '',

          }
        ],
        series: [
          {
            name: '中信球库存',
            type: 'bar',
            data: this.chart_data_left
          },
          {
            name: '日耗',
            type: 'bar',
            data: this.chart_data_use
          },
          {
            name: '可用天数',
            type: 'line',
            yAxisIndex: 1,
            data: this.chart_data_day
          }
        ]
      };
      myChart_chart.setOption(option_chart)
    },
    methods: {}
  };
</script>

<style lang="scss" scoped>
    .msg-container {
        width: 100%;
        height: 50px;
        border: 1px solid #888;
        box-sizing: border-box;
        overflow: auto;
        margin-top: 5px;
        & > p {
            height: 48px;
            line-height: 48px;
        }
    }

    .table > caption + thead > tr:first-child > td, .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > td, .table > thead:first-child > tr:first-child > th {
        border: none;
    }

    .msg {
        padding: 0 5px;
    }

    .chart-container {
        width: 90%;
        height: 200px;
    }

    .replace {
        height: 28px;
    }

</style>
